<template>
	<div>
		<Search v-if="activeName === 'manage'" />
		<div style="margin-top: 20px">
			<el-button @click="handleClick('manage')" :type="activeName == 'manage' ? 'primary' : ''">试题管理</el-button>
			<el-button @click="handleClick('create')" :type="activeName == 'create' ? 'primary' : ''">创建试题</el-button>
			<template v-if="activeName === 'manage'">
				<el-button type="info" plain icon="el-icon-upload2" @click="handleImport">导入试题</el-button>
				<el-button type="danger" plain icon="el-icon-delete" @click="handleBatchDelete()">批量删除</el-button>
			</template>
		</div>
		<div class="wrap">
			<component :is="activeName" />
		</div>
		<Import />
	</div>
</template>
<script>
export default {
	components: {
		Search: () => import('./Search.vue'),
		manage: () => import('./List.vue'),
		create: () => import('./Add.vue'),
		Import: () => import('./Import.vue')
	},
	computed: {
		activeName() {
			return this.$store.state.question.activeName;
		}
	},
	mounted() {
		this.handleClick('manage');
	},
	methods: {
		handleClick(v) {
			this.$store.commit('SET_ACTIVENAME', v);
			this.$store.commit('SET_ACTIVEROW', {});
		},
		// 导入
		handleImport() {
			this.$bus.$emit('showDialogImport');
		},

		handleBatchDelete() {
			this.$bus.$emit('batchDeleteData');
		}
	}
};
</script>
<style scoped lang="scss">
.wrap {
	padding: 20px 10px;
	max-height: 620px;
	overflow-y: auto;
}
</style>
